<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.11.6/dist/css/layui.min.css"> -->
    <!-- <script src="http://cdn.staticfile.net/layui/2.9.4/css/layui.min.css"></script> -->
    <title>EXCEL题库生成器</title>
    <style>
        #count{
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">
            EXCEL题库生成器
        </div>
        <div class="layui-card-body">
            <div class="layui layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">EXCEL文件</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                            <i class="layui-icon layui-icon-upload"></i> 
                            <div>点击上传，或将文件拖拽到此处</div>
                        </div>
                        <div class="layui-input-block layui-hide" id="ID-upload-demo-preview">
                            <textarea id="excel-content" rows="7" class="layui-textarea"></textarea>
                        </div>
                    </div>


                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题字号</label>
                    <div class="layui-input-block">
                        <input type="number" value="36" id="question-size" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项字号</label>
                    <div class="layui-input-block">
                        <input type="number" value="40"  id="answer-size" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文字颜色</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="radio" name="option-black" title="白色" value="1" checked>
                        <input class="layui-input" type="radio" name="option-black" title="彩色" value="0" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">颜色种类</label>
                    <div class="layui-input-block">
                        <input type="number" id="color-count" value="4" class="layui-input">

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生成配置</label>
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="generateString()">
                            生成
                        </button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生成结果</label>
                    <div class="layui-input-block">
                        <textarea id="result" rows="8" class="layui-textarea"></textarea>
                        <p id="count"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- <script src="https://cdn.jsdelivr.net/npm/layui@2.11.6/dist/layui.min.js"></script> -->
<script src="https://cdn.staticfile.net/layui/2.9.4/layui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
var questionList = [];
layui.use(function(){
    var upload = layui.upload;
    var $ = layui.$;
    // 渲染
    upload.render({
        elem: '#ID-upload-demo-drag',
        url: '', // 实际使用时改成您自己的上传接口即可。
        auto: false,
        accept: 'file',
        choose: function(obj){
            obj.preview(function(index, file, result){
                layer.msg('选择文件：' + file.name); //得到文件对象
                const reader = new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload = function(e) {
                    const arrayBuffer = e.target.result;
                    const wb = XLSX.read(arrayBuffer, { type: 'array' });
                    const ws = wb.Sheets[wb.SheetNames[0]];
                    const data = XLSX.utils.sheet_to_json(ws, { header: 4 });
                    questionList = [];
                    let questionPreview = '';
                    // 从第四行开始是题库
                    for(let i = 3; i < data.length; i ++){
                        let newQuestion = {
                            question: data[i].question,
                            right: data[i].right,
                            wrongList: data[i].wrong.split('、')
                        }
                        questionList.push(newQuestion);
                        console.log(newQuestion);
                        questionPreview += `${data[i].question}：${data[i].right}；${data[i].wrong}\n`
                    }
                    $('#ID-upload-demo-preview').removeClass('layui-hide')
                    $('#excel-content').val(questionPreview);
                };
            })
        }
    });
});
function generateString(){
    let result = generateResult(questionList);
    $('#result').val(result);
}

function generateResult(res){
    let questionSize = $('#question-size').val();
    let optionSize = $('#answer-size').val();
    let isBlack = $('input[name="option-black"]:checked').val() == 1
    let qtag1 = '<size=' + questionSize + '>' + (isBlack ? '<outline color=#000000 width=1>' : '');
    let qtag2 = (isBlack ? '</outline>' : '') + '</size>';
    let otag1 = (optionSize ? '<size=' + optionSize + '>' : '') + (isBlack ? '<outline color=#000000 width=1>' : '')
    let otag2 = (isBlack ? '</outline>' : '') + (optionSize ? '</size>' : '');
    let configArr = [];
    for(let i = 0;i < res.length; i ++){
        let item = res[i];
        let questionTag = item.question;
        let rightTag = item.right;
        if(!isBlack){
            questionTag = getColorTag(questionTag, true)
            rightTag = getColorTag(rightTag);
        }
        let configItem = {
            question: qtag1 + "<b>" + questionTag + "</b>" + qtag2,
            rightList: [otag1 + "<b>" + rightTag + "</b>" + otag2],
            wrongList: []
        }
        for(let j = 0;j<item.wrongList.length;j++){
            let wrongItem = item.wrongList[j];
            if(!isBlack){
                wrongItem = getColorTag(wrongItem);
            }
            configItem.wrongList.push( otag1 + "<b>" + wrongItem + "</b>" + otag2); 
        }
        configArr.push(configItem);
    }
    return JSON.stringify(configArr)
}
function getRandomColor(){
    let limit = $('#color-count').val();
    const colorHex = {
        red: '#FF0000',
        green: '#00B600',
        blue: '#0000FF',
        yellow: '#FFFF00',
        black: '#000000',
        white: '#FFFFFF',
        purple: '#800080',
        orange: '#FF6500',
        // gray: '#808080',
        brown: '#8B4513',
        pink: '#FFC0CB',
        cyan: '#00FFFF'
    }
    // 便利对象
    const colorArr = [];
    for(let key in colorHex){
        colorArr.push(key);
    }
    if(!limit || limit > colorArr.length){
        limit = colorArr.length;
    }
    let randomColor = colorArr[Math.floor(Math.random() * limit)];
    return colorHex[randomColor];
}
function getColorTag(str, isSeperate = false){
    if(isSeperate){
        return str.split('').map(char => '<color=' + getRandomColor() + '>' + char + '</color>').join('')
    }
    else{
        return '<color=' + getRandomColor() + '>' + str + '</color>'
    }
}
</script>
</html>
